<!-- 信号分析实验室 - 独立全屏页面 -->
<template>
  <div class="signal-analysis-lab">
    <!-- 顶部工具栏 -->
    <div class="lab-header">
      <div class="header-left">
        <h1 class="lab-title">
          <el-icon class="title-icon"><DataAnalysis /></el-icon>
          信号分析实验室
        </h1>
        <div class="lab-info">
          <el-tag type="success" size="small">
            <el-icon><CircleCheckFilled /></el-icon>
            实时分析中
          </el-tag>
          <el-tag type="info" size="small">{{ currentSession }}</el-tag>
          <el-tag type="warning" size="small">数据源: {{ dataSourceCount }} 个</el-tag>
        </div>
      </div>
      
      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button size="small" @click="exportAnalysis">
            <el-icon><Download /></el-icon>
            导出分析
          </el-button>
          <el-button size="small" @click="openSettings">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
          <el-button size="small" type="primary" @click="startNewAnalysis">
            <el-icon><Plus /></el-icon>
            新建分析
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主分析区域 -->
    <div class="lab-content">
      <!-- 左侧控制面板 -->
      <el-aside :width="leftPanelWidth" class="control-panel">
        <el-tabs v-model="activeControlTab" stretch class="control-tabs">
          <el-tab-pane label="数据源" name="datasource">
            <div class="datasource-panel">
              <div class="panel-section">
                <h4 class="section-title">活跃数据源</h4>
                <div class="datasource-list">
                  <div 
                    v-for="source in dataSources" 
                    :key="source.id"
                    class="datasource-item"
                    :class="{ active: source.active }"
                    @click="toggleDataSource(source)"
                  >
                    <div class="source-indicator" :class="source.status"></div>
                    <div class="source-info">
                      <div class="source-name">{{ source.name }}</div>
                      <div class="source-details">{{ source.frequency }} | {{ source.bandwidth }}</div>
                    </div>
                    <div class="source-stats">{{ source.dataRate }}</div>
                  </div>
                </div>
              </div>
              
              <div class="panel-section">
                <h4 class="section-title">分析参数</h4>
                <div class="param-controls">
                  <div class="param-item">
                    <label>分析深度</label>
                    <el-select v-model="analysisDepth" size="small">
                      <el-option label="快速分析" value="fast"></el-option>
                      <el-option label="标准分析" value="standard"></el-option>
                      <el-option label="深度分析" value="deep"></el-option>
                    </el-select>
                  </div>
                  
                  <div class="param-item">
                    <label>时间窗口</label>
                    <el-select v-model="timeWindow" size="small">
                      <el-option label="1秒" value="1s"></el-option>
                      <el-option label="5秒" value="5s"></el-option>
                      <el-option label="10秒" value="10s"></el-option>
                      <el-option label="30秒" value="30s"></el-option>
                    </el-select>
                  </div>
                  
                  <div class="param-item">
                    <label>频率范围</label>
                    <el-select v-model="frequencyRange" size="small">
                      <el-option label="1-6 GHz" value="1-6"></el-option>
                      <el-option label="6-18 GHz" value="6-18"></el-option>
                      <el-option label="18-40 GHz" value="18-40"></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="算法" name="algorithm">
            <div class="algorithm-panel">
              <div class="panel-section">
                <h4 class="section-title">分析算法</h4>
                <div class="algorithm-list">
                  <div 
                    v-for="algo in algorithms" 
                    :key="algo.id"
                    class="algorithm-item"
                    :class="{ active: algo.enabled }"
                    @click="toggleAlgorithm(algo)"
                  >
                    <div class="algo-info">
                      <div class="algo-name">{{ algo.name }}</div>
                      <div class="algo-desc">{{ algo.description }}</div>
                    </div>
                    <div class="algo-status">
                      <el-switch v-model="algo.enabled" @change="onAlgorithmChange(algo)" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        
        <!-- 面板调整器 -->
        <div 
          class="panel-resizer left-resizer"
          @mousedown="startResize('left', $event)"
        ></div>
      </el-aside>

      <!-- 中央分析视图 -->
      <el-main class="analysis-area">
        <div class="analysis-container">
          <!-- 波形动态播放器 -->
          <div class="analysis-section waveform-section">
            <WaveformPlayer />
          </div>
          
          <!-- 脉冲密度热力图 -->
          <div class="analysis-section heatmap-section">
            <PulseDensityHeatmap />
          </div>
        </div>
      </el-main>

      <!-- 右侧结果面板 -->
      <el-aside :width="rightPanelWidth" class="result-panel">
        <div class="result-container">
          <div class="result-header">
            <h3 class="result-title">
              <el-icon><TrendCharts /></el-icon>
              分析结果
            </h3>
            <el-button size="small" @click="clearResults">
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
          </div>
          
          <div class="result-content">
            <!-- 实时统计 -->
            <div class="stats-section">
              <h4 class="section-title">实时统计</h4>
              <div class="stats-grid">
                <div class="stat-card">
                  <div class="stat-value">{{ totalSignals }}</div>
                  <div class="stat-label">检测信号</div>
                </div>
                <div class="stat-card">
                  <div class="stat-value">{{ pulseRate }}</div>
                  <div class="stat-label">脉冲率 (M/s)</div>
                </div>
                <div class="stat-card">
                  <div class="stat-value">{{ avgFreq }}</div>
                  <div class="stat-label">平均频率 (GHz)</div>
                </div>
                <div class="stat-card">
                  <div class="stat-value">{{ snrAvg }}</div>
                  <div class="stat-label">平均SNR (dB)</div>
                </div>
              </div>
            </div>
            
            <!-- 识别结果 -->
            <div class="recognition-section">
              <h4 class="section-title">信号识别</h4>
              <div class="recognition-list">
                <div 
                  v-for="signal in recognizedSignals" 
                  :key="signal.id"
                  class="recognition-item"
                >
                  <div class="signal-type" :class="signal.confidence">{{ signal.type }}</div>
                  <div class="signal-params">
                    <span>{{ signal.frequency }}</span>
                    <span>{{ signal.modulation }}</span>
                    <span>置信度: {{ signal.confidence }}%</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 异常检测 -->
            <div class="anomaly-section">
              <h4 class="section-title">异常检测</h4>
              <div class="anomaly-list">
                <div 
                  v-for="anomaly in anomalies" 
                  :key="anomaly.id"
                  class="anomaly-item"
                  :class="anomaly.severity"
                >
                  <div class="anomaly-icon">
                    <el-icon><Warning /></el-icon>
                  </div>
                  <div class="anomaly-info">
                    <div class="anomaly-type">{{ anomaly.type }}</div>
                    <div class="anomaly-time">{{ anomaly.timestamp }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 面板调整器 -->
        <div 
          class="panel-resizer right-resizer"
          @mousedown="startResize('right', $event)"
        ></div>
      </el-aside>
    </div>

    <!-- 底部状态栏 -->
    <div class="lab-footer">
      <div class="status-left">
        <div class="status-item">
          <el-icon><Timer /></el-icon>
          <span>运行时长: {{ runningTime }}</span>
        </div>
        <div class="status-item">
          <el-icon><Monitor /></el-icon>
          <span>处理速度: {{ processingSpeed }} samples/s</span>
        </div>
        <div class="status-item">
          <el-icon><CreditCard /></el-icon>
          <span>内存使用: {{ memoryUsage }}%</span>
        </div>
      </div>
      
      <div class="status-right">
        <div class="system-status">
          <span class="status-label">系统状态:</span>
          <span class="status-indicator" :class="systemStatus.level">{{ systemStatus.text }}</span>
        </div>
        <div class="performance-meter">
          <el-progress 
            :percentage="systemPerformance" 
            :color="performanceColor"
            :show-text="false"
            style="width: 10vw;"
          />
          <span class="perf-text">{{ systemPerformance }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  DataAnalysis,
  CircleCheckFilled,
  Refresh,
  Download,
  Setting,
  Plus,
  TrendCharts,
  Delete,
  Warning,
  Timer,
  Monitor,
  CreditCard
} from '@element-plus/icons-vue'

// 导入组件
import WaveformPlayer from './components/signal-lab/WaveformPlayer.vue'
import PulseDensityHeatmap from './components/signal-lab/PulseDensityHeatmap.vue'

// UI状态
const activeControlTab = ref('datasource')
const leftPanelWidth = ref('380px')
const rightPanelWidth = ref('350px')

// 会话信息
const currentSession = ref('会话-2024-001')
const dataSourceCount = ref(8)
const runningTime = ref('02:15:30')

// 分析参数
const analysisDepth = ref('standard')
const timeWindow = ref('10s')
const frequencyRange = ref('1-6')

// 数据源管理
const dataSources = reactive([
  {
    id: 1,
    name: 'RX-001',
    frequency: '2.4 GHz',
    bandwidth: '20 MHz',
    dataRate: '1.2 MB/s',
    status: 'online',
    active: true
  },
  {
    id: 2,
    name: 'RX-002',
    frequency: '5.8 GHz',
    bandwidth: '40 MHz',
    dataRate: '2.8 MB/s',
    status: 'online',
    active: true
  },
  {
    id: 3,
    name: 'RX-003',
    frequency: '10.5 GHz',
    bandwidth: '100 MHz',
    dataRate: '5.1 MB/s',
    status: 'warning',
    active: false
  },
  {
    id: 4,
    name: 'RX-004',
    frequency: '15.2 GHz',
    bandwidth: '80 MHz',
    dataRate: '3.9 MB/s',
    status: 'offline',
    active: false
  }
])

// 算法管理
const algorithms = reactive([
  {
    id: 1,
    name: 'FFT频谱分析',
    description: '快速傅里叶变换频谱分析',
    enabled: true
  },
  {
    id: 2,
    name: 'STFT时频分析',
    description: '短时傅里叶变换时频分析',
    enabled: true
  },
  {
    id: 3,
    name: '小波变换',
    description: '连续小波变换分析',
    enabled: false
  },
  {
    id: 4,
    name: 'IQ解调分析',
    description: 'I/Q数据解调与分析',
    enabled: true
  },
  {
    id: 5,
    name: 'AI智能识别',
    description: '基于深度学习的信号识别',
    enabled: false
  }
])

// 统计数据
const totalSignals = ref(1847)
const pulseRate = ref(125.8)
const avgFreq = ref(8.2)
const snrAvg = ref(23.5)
const processingSpeed = ref('2.8M')
const memoryUsage = ref(67)
const systemPerformance = ref(89)

// 识别结果
const recognizedSignals = reactive([
  {
    id: 1,
    type: '雷达脉冲',
    frequency: '9.4 GHz',
    modulation: 'LFM',
    confidence: 95
  },
  {
    id: 2,
    type: '通信信号',
    frequency: '2.4 GHz',
    modulation: 'QPSK',
    confidence: 87
  },
  {
    id: 3,
    type: '干扰信号',
    frequency: '5.8 GHz',
    modulation: 'Noise',
    confidence: 72
  }
])

// 异常检测
const anomalies = reactive([
  {
    id: 1,
    type: '频率漂移异常',
    timestamp: '14:32:15',
    severity: 'high'
  },
  {
    id: 2,
    type: '功率异常波动',
    timestamp: '14:31:42',
    severity: 'medium'
  },
  {
    id: 3,
    type: '调制异常',
    timestamp: '14:30:18',
    severity: 'low'
  }
])

// 系统状态
const systemStatus = reactive({
  level: 'normal',
  text: '正常运行'
})

// 计算属性
const performanceColor = computed(() => {
  const perf = systemPerformance.value
  if (perf >= 80) return '#67C23A'
  if (perf >= 60) return '#E6A23C'
  return '#F56C6C'
})

// 面板调整相关
let isResizing = false
let resizeType = null
let startX = 0
let startWidth = 0

// 数据源控制
const toggleDataSource = (source) => {
  source.active = !source.active
  ElMessage.success(`数据源 ${source.name} 已${source.active ? '启用' : '禁用'}`)
}

// 算法控制
const toggleAlgorithm = (algo) => {
  algo.enabled = !algo.enabled
}

const onAlgorithmChange = (algo) => {
  ElMessage.info(`算法 ${algo.name} 已${algo.enabled ? '启用' : '禁用'}`)
}

// 顶部工具栏操作
const refreshData = () => {
  ElMessage.success('数据已刷新')
  // 刷新数据逻辑
}

const exportAnalysis = () => {
  const analysisData = {
    session: currentSession.value,
    timestamp: new Date().toISOString(),
    dataSources: dataSources.filter(s => s.active),
    algorithms: algorithms.filter(a => a.enabled),
    statistics: {
      totalSignals: totalSignals.value,
      pulseRate: pulseRate.value,
      avgFreq: avgFreq.value,
      snrAvg: snrAvg.value
    },
    recognizedSignals: recognizedSignals,
    anomalies: anomalies
  }
  
  const dataStr = JSON.stringify(analysisData, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  
  const link = document.createElement('a')
  link.href = url
  link.download = `signal_analysis_${Date.now()}.json`
  link.click()
  
  URL.revokeObjectURL(url)
  ElMessage.success('分析报告已导出')
}

const openSettings = () => {
  ElMessage.info('设置面板开发中...')
}

const startNewAnalysis = async () => {
  try {
    await ElMessageBox.confirm('确定要开始新的分析会话吗？当前数据将被清空。', '新建分析', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 重置数据
    totalSignals.value = 0
    recognizedSignals.splice(0)
    anomalies.splice(0)
    currentSession.value = `会话-${new Date().getFullYear()}-${String(Date.now()).slice(-3)}`
    
    ElMessage.success('新分析会话已开始')
  } catch {
    // 用户取消
  }
}

// 结果面板操作
const clearResults = async () => {
  try {
    await ElMessageBox.confirm('确定要清空所有分析结果吗？', '清空结果', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    recognizedSignals.splice(0)
    anomalies.splice(0)
    ElMessage.success('分析结果已清空')
  } catch {
    // 用户取消
  }
}

// 面板调整
const startResize = (type, event) => {
  isResizing = true
  resizeType = type
  startX = event.clientX
  startWidth = type === 'left' ?
    parseInt(leftPanelWidth.value) :
    parseInt(rightPanelWidth.value)

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  document.body.style.cursor = 'col-resize'
}

const handleResize = (event) => {
  if (!isResizing) return

  const deltaX = event.clientX - startX

  if (resizeType === 'left') {
    const newWidth = Math.max(320, Math.min(500, startWidth + deltaX))
    leftPanelWidth.value = `${newWidth}px`
  } else if (resizeType === 'right') {
    const newWidth = Math.max(300, Math.min(450, startWidth - deltaX))
    rightPanelWidth.value = `${newWidth}px`
  }
}

const stopResize = () => {
  isResizing = false
  resizeType = null
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  document.body.style.cursor = 'default'
}

// 模拟数据更新
const startDataUpdate = () => {
  setInterval(() => {
    // 更新统计数据
    totalSignals.value += Math.floor(Math.random() * 3)
    pulseRate.value = +(Math.random() * 50 + 100).toFixed(1)
    avgFreq.value = +(Math.random() * 10 + 5).toFixed(1)
    snrAvg.value = +(Math.random() * 10 + 20).toFixed(1)
    memoryUsage.value = Math.floor(Math.random() * 20 + 60)
    systemPerformance.value = Math.floor(Math.random() * 20 + 80)
    
    // 更新运行时间
    const start = new Date(Date.now() - Math.random() * 3600000 * 3)
    const now = new Date()
    const diff = now - start
    const hours = Math.floor(diff / 3600000)
    const minutes = Math.floor((diff % 3600000) / 60000)
    const seconds = Math.floor((diff % 60000) / 1000)
    runningTime.value = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
  }, 2000)
}

// 生命周期
onMounted(() => {
  startDataUpdate()
})

onBeforeUnmount(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<style scoped>
/* 主容器 - 独立全屏显示 */
.signal-analysis-lab {
  width: 96vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 4vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 顶部工具栏 */
.lab-header {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5vh 2vw;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.lab-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.title-icon {
  font-size: 1.6rem;
  color: var(--el-color-primary);
}

.lab-info {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.header-actions {
  display: flex;
  gap: 1vw;
}

.action-group .el-button {
  height: 3.5vh;
  font-size: 0.85rem;
}

/* 主内容区域 */
.lab-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* 左侧控制面板 */
.control-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  position: relative;
  min-width: 320px;
  max-width: 500px;
  flex-shrink: 0;
  transition: width 0.3s ease;
}

.control-tabs {
  height: 100%;
}

.control-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
}

.control-tabs :deep(.el-tabs__content) {
  height: calc(100% - 5vh);
  overflow-y: auto;
  padding: 2vh;
}

.datasource-panel,
.algorithm-panel {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.panel-section {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  border: 1px solid #2d3a4b;
}

.section-title {
  margin: 0 0 1.5vh 0;
  font-size: 1rem;
  font-weight: 600;
  color: #bfcbd9;
}

/* 数据源列表 */
.datasource-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.datasource-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh;
  background: #263445;
  border-radius: 0.5vh;
  border: 1px solid #2d3a4b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.datasource-item:hover {
  background: #2d3a4b;
  border-color: #409EFF;
}

.datasource-item.active {
  border-color: #67C23A;
  background: #1f4838;
}

.source-indicator {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
}

.source-indicator.online {
  background: #67C23A;
}

.source-indicator.warning {
  background: #E6A23C;
}

.source-indicator.offline {
  background: #F56C6C;
}

.source-info {
  flex: 1;
}

.source-name {
  font-weight: 600;
  color: #bfcbd9;
  font-size: 0.9rem;
}

.source-details {
  font-size: 0.75rem;
  color: #8591a3;
}

.source-stats {
  color: #409EFF;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 参数控制 */
.param-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.param-item {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.param-item label {
  color: #8591a3;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 算法列表 */
.algorithm-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.algorithm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vh;
  background: #263445;
  border-radius: 0.5vh;
  border: 1px solid #2d3a4b;
  transition: all 0.3s ease;
}

.algorithm-item:hover {
  background: #2d3a4b;
}

.algorithm-item.active {
  border-color: #67C23A;
}

.algo-info {
  flex: 1;
}

.algo-name {
  font-weight: 600;
  color: #bfcbd9;
  font-size: 0.9rem;
}

.algo-desc {
  font-size: 0.75rem;
  color: #8591a3;
  margin-top: 0.3vh;
}

/* 面板调整器 */
.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.4vw;
  background: transparent;
  cursor: col-resize;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.left-resizer {
  right: -0.2vw;
}

.right-resizer {
  left: -0.2vw;
}

.panel-resizer:hover {
  background: #409EFF;
}

/* 中央分析区域 */
.analysis-area {
  flex: 1;
  padding: 0;
  background: #0a0f1b;
  position: relative;
  overflow: hidden;
}

.analysis-container {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1vh;
  padding: 1vh;
}

.analysis-section {
  background: #1f2d3d;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  overflow: hidden;
}

/* 右侧结果面板 */
.result-panel {
  background: #263445;
  border-left: 1px solid #2d3a4b;
  position: relative;
  min-width: 300px;
  max-width: 450px;
  flex-shrink: 0;
}

.result-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5vh 2vh;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
}

.result-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.result-content {
  flex: 1;
  overflow-y: auto;
  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

/* 统计卡片 */
.stats-section {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  border: 1px solid #2d3a4b;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh;
}

.stat-card {
  background: #263445;
  border-radius: 0.5vh;
  padding: 1vh;
  text-align: center;
  border: 1px solid #2d3a4b;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 0.5vh;
}

.stat-label {
  font-size: 0.75rem;
  color: #8591a3;
}

/* 识别结果 */
.recognition-section {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  border: 1px solid #2d3a4b;
}

.recognition-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.recognition-item {
  background: #263445;
  border-radius: 0.5vh;
  padding: 1vh;
  border: 1px solid #2d3a4b;
}

.signal-type {
  font-weight: 600;
  color: #bfcbd9;
  font-size: 0.9rem;
  margin-bottom: 0.5vh;
}

.signal-params {
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
  font-size: 0.75rem;
  color: #8591a3;
}

/* 异常检测 */
.anomaly-section {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  border: 1px solid #2d3a4b;
}

.anomaly-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.anomaly-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  background: #263445;
  border-radius: 0.5vh;
  padding: 1vh;
  border: 1px solid #2d3a4b;
}

.anomaly-item.high {
  border-color: #F56C6C;
  background: #4a2c2c;
}

.anomaly-item.medium {
  border-color: #E6A23C;
  background: #4a3c1d;
}

.anomaly-item.low {
  border-color: #409EFF;
  background: #1f3a4a;
}

.anomaly-icon {
  color: inherit;
}

.anomaly-info {
  flex: 1;
}

.anomaly-type {
  font-weight: 600;
  color: #bfcbd9;
  font-size: 0.8rem;
}

.anomaly-time {
  font-size: 0.7rem;
  color: #8591a3;
  font-family: 'Monaco', 'Consolas', monospace;
}

/* 底部状态栏 */
.lab-footer {
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: #1f2d3d;
  border-top: 1px solid #2d3a4b;
  font-size: 0.8rem;
}

.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.status-label {
  color: #8591a3;
}

.status-indicator {
  font-weight: 600;
}

.status-indicator.normal {
  color: #67C23A;
}

.status-indicator.warning {
  color: #E6A23C;
}

.status-indicator.error {
  color: #F56C6C;
}

.performance-meter {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.perf-text {
  color: #8591a3;
  font-size: 0.75rem;
  min-width: 3vw;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

:deep(.el-button--primary) {
  background: #409EFF !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

:deep(.el-tag) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-tag--success) {
  background: #1f4838 !important;
  color: #67C23A !important;
}

:deep(.el-tag--warning) {
  background: #4a3c1d !important;
  color: #E6A23C !important;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
}

:deep(.el-select .el-input__inner) {
  color: #bfcbd9 !important;
}

:deep(.el-tabs__item) {
  color: #bfcbd9 !important;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF !important;
}

:deep(.el-tabs__active-bar) {
  background-color: #409EFF !important;
}

:deep(.el-switch__core) {
  background: #2d3a4b !important;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background: #409EFF !important;
}

:deep(.el-progress-bar__outer) {
  background: #2d3a4b !important;
}

/* 滚动条样式 */
:deep(.el-tabs__content)::-webkit-scrollbar,
.result-content::-webkit-scrollbar {
  width: 8px;
}

:deep(.el-tabs__content)::-webkit-scrollbar-track,
.result-content::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 4px;
}

:deep(.el-tabs__content)::-webkit-scrollbar-thumb,
.result-content::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 4px;
  transition: background 0.3s ease;
}

:deep(.el-tabs__content)::-webkit-scrollbar-thumb:hover,
.result-content::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .control-panel {
    min-width: 300px;
    max-width: 400px;
  }
  
  .result-panel {
    min-width: 280px;
    max-width: 380px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .lab-title {
    font-size: 1.2rem;
  }
  
  .lab-info {
    flex-direction: column;
    gap: 0.5vh;
  }
}

@media (max-width: 768px) {
  .lab-content {
    flex-direction: column;
  }
  
  .control-panel,
  .result-panel {
    position: relative;
    width: 100% !important;
    max-width: none;
    min-width: auto;
  }
  
  .analysis-container {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
  }
  
  .analysis-section:nth-child(2) {
    display: none;
  }
}
</style>